<template>
	<view class="home">
		<image v-show="is_open == 1" v-if="isImg" :src="advert" style='vertical-align:top;'></image>
		<!-- logo -->
		<view class="" v-else>
			<view class="logoBox" :style="'margin-top:' + (height + 40) + 'rpx'">
				<image :src="image+'assets/web_img/logom.png'" mode="widthFix"></image>
			</view>
			<view class="contentBox">
				<!-- 背景图片 -->
				<view class="imageBox">
					<u-swiper  v-if="bannerList.length>0" :list="bannerList" mode="dot" indicator-pos="bottomCenter"></u-swiper>
					<!-- <image :src="image+'assets/web_img/edit10.png'" mode="widthFix"></image> -->
				</view>
				<!-- 按钮 -->
				<view class="listBox flex-r-a-c">
					<view class="list" @tap.stop="goShop">
						<view class="imgBox" style="width: 74rpx; height: 94rpx;">
							<image :src="image+'assets/web_img/shape2.png'" mode=""></image>
						</view>
						<view class="title">来杯奶茶</view>
						<!-- <view>{{ inviter_id }}-我是inviter_id {{JSON.stringify(e)}}-我是e</view> -->
						<view class="text">一键下单、免排队</view>
					</view>
					<view class="list" @tap.stop="activity">
						<view class="imgBox" style="width: 76rpx; height: 84rpx;">
							<image :src="image+'assets/web_img/shape8.png'" mode=""></image>
						</view>
						<view class="title">来PK一下</view>
						<view class="text">PK一下、更快乐</view>
					</view>
				</view>
				<!-- 信息轮播 -->
				<view class="swiper">
					<swiper style="height: 136rpx;" :autoplay="true" :interval="3000" :duration="2000" circular>
						<swiper-item v-for="(item,index) in swiperList" :key="index">
							<view class="textBox flex-r-s-c">
								<view class="imgBox">
									<image :src="image+`${item.payment_avatar}`" mode=""></image>
								</view>
								<view class="text">{{item.payment_user}}为</view>
								<view class="imgBox">
									<image :src="image+`${item.order_avatar}`" mode=""></image>
								</view>
								<view class="text">{{item.order_user}}{{item.describe}}</view>
							</view>
						</swiper-item>
					</swiper>
					<!-- <view style="width: 100%; height: 120rpx;"></view> -->
				</view>
			</view>
		</view>
		
		<!-- 内容 -->
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				e: null,
				inviter_id: 'xxx',
				height: this.$utils.height(),
				image: this.$base.smallimgUrl,
				swiperList: [],
				isImg:true,
				advert:'',
				bannerList:[],
				bigImg:this.$base.imgUrl,
				is_open: 0
			};
		},
		onLoad(e) {
	
			if(e.q&&e.q!="undefined"){//扫码进入
					const qrUrl = decodeURIComponent(e.q) // 获取到二维码原始链接内容
			        //GetWxMiniProgramUrlParam() 这个方法是解析链接地址中的参数方法
					e = this.GetWxMiniProgramUrlParam(qrUrl);//此处就是我们要获取的参数 json
			        //比如我要得到inviter_id的值，直接取值即可
					uni.setStorageSync('inviter_id',e.inviter_id)
			   
			}
			uni.hideTabBar()
			this.e = e
			this.showImg()
			
		},
		onShow() {
			this.getHomeSwiper()
			this.bannerSwiper()
		},
		methods: {
			GetWxMiniProgramUrlParam (url) {
			  let theRequest = {};
			  if(url.indexOf("#") != -1){
				  const str=url.split("#")[1];
				  const strs=str.split("&");
				  for (let i = 0; i < strs.length; i++) {
				  	theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
				  }
			  }else if(url.indexOf("?") != -1){
				  const str=url.split("?")[1];
				  const strs=str.split("&");
				  for (let i = 0; i < strs.length; i++) {
				  	theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
				  }
			  }
			  return theRequest;
			  },

			showImg(){
				let that = this
				
				that.$api.advert().then(res => {
					this.advert = res.data.data.img
					this.is_open = res.data.data.is_open
					if(this.is_open != 1){
						this.isImg = false
						uni.reLaunch({
							url:'/pages/check/check'
						})
					}else{
						setTimeout(()=>{
							this.isImg = false
							uni.showTabBar()
						},3000)
					}
				})
			
			},
			// 背景图轮播
			bannerSwiper(){
				let that = this
				that.$api.bannerList().then(res => {
					this.bannerList = res.data.data.map(item => {
						return {
							image: this.$base.imgUrl + item.img
						}
					})
					// console.log(this.bannerList,'word')
				})
			},
			// 文字轮播
			getHomeSwiper(){
				// console.log(this.image +item.order_avatar)
				let that = this
				that.$api.rollindex().then(res => {
					that.swiperList = res.data.data
				})
			},
			// 生成pk活动
			activity(){
				let that = this
				that.$api.pkIndexCreate().then(res => {
					uni.navigateTo({
						url: '/pages/pk/pk?active_id=' + res.data.data.active_id
					})
				})
			},
			
			// 
			goShop(){
				let that = this
				uni.switchTab({
					url: '/pages/tabBar/shop/shop'
				})
			},
			
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f9f9f9;
	}
	.home{
		width: 100vw;
		height: 100vh;
		image{
			width: 100%;
			height: 100%;
		}
		.logoBox{
			width: 92rpx;
			margin-left: 50rpx;
		}
		.swiper{
			width: 90%;
			height: 136rpx;
			background: #fff;
			margin: 10rpx auto 20rpx;
			border-radius: 24rpx;
			position: absolute;
			bottom: 10rpx;
			left: 40rpx;
			z-index: 10;
			.textBox{
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				.imgBox{
					width: 70rpx !important;
					height: 70rpx !important;
					border-radius: 50%;
					overflow: hidden;
					margin-right:4rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.text{
					font-size: 24rpx;
					font-weight: 400;
					margin-left: 8rpx;
					margin-right: 6rpx;
					flex: 1;
				}
			}
		}
		.contentBox{
			width: 100%;

			.imageBox {
				width: 100%;
				position: relative;
				left: 0;
				top: 0;
				z-index: 1;
			}
			.listBox{
				width: 100%;
				height: 166rpx;
				background-color: #f9f9f9;
				border-top-left-radius: 24rpx;
				border-top-right-radius: 24rpx;
				position: relative;
				left: 0;
				top: -133rpx;
				z-index: 9;
				.list{
					width: 330rpx;
					height: 330rpx;
					background-color: #fff;
					border-radius: 24rpx;
					margin-top: -165rpx;
					text-align: center;
					.imgBox{
						margin: 0 auto;
						margin-top: 60rpx;
					}
					.title{
						font-size: 32rpx;
						font-weight: 600;
						margin: 20rpx auto;
					}
					.text{
						font-size: 24rpx;
						font-weight: 400;
						color: #7F8084;
					}
				}
			}
		}
	}
	
		
	::v-deep .imageBox swiper{
		height: 70vh !important;
	}
</style>
